<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/js/bootstrap.min.js" type="application/javascript"></script>
    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			&nbsp;
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-12 column">
			<h3>
				微信公众号code测试
			</h3>
			<form class="form-horizontal" role="form">
				<div class="form-group">
					 <label for="code" class="col-sm-2 control-label"></label>
					<div class="col-sm-10">
						<input type="email" class="form-control" id="code" readonly="readonly" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						 &nbsp;
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<div style="padding-bottom: 10px;"><button type="button" class="btn btn-default btn-primary" onclick="getCode('snsapi_base')">snsapi_base获取code</button></div>
						<div style="padding-bottom: 10px;"><button type="button" class="btn btn-default btn-primary" onclick="getCode('snsapi_userinfo')">snsapi_userinfo获取code</button></div>
						<div style="padding-bottom: 10px;"><button type="button" class="btn btn-default btn-primary" onclick="getUser()">获取用户</button>
						 <button type="button" class="btn btn-default btn-success" id="copy-code">复制code</button></div>
					</div>
				</div>
			</form> 
		</div>
		<div class="col-md-12 column">
			<table class="table table-bordered table-condensed">
			
				<tbody>
					<tr>
						<td width="40%">openid</td>
						<td id="openid"></td>
					</tr>
					<tr  class="error">
						<td>nickname</td>
						<td id="nickname"></td>
					</tr>
					<tr  class="warning">
						<td>headimgurl</td>
						<td id="headimgurl"></td>
					</tr>
					<tr  class="">
						<td>headimgurl</td>
						<td><img src="" alt=""  class="headimgurl"/></td>
					</tr>
					<tr  class="warning">
						<td>scope</td>
						<td id="scope"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script>
	var domain = "{your domain}/"
	$(function(){
		_getCode()
		$("#copy-code").click(function(){
			copyTextToClipboard($("#code").val())
		})
	})
	function _getCode() {
		var  code = getQuery('code')
		if (code) {
			$("#code").val(code);
		}
	}
	function getCode(scope) {
		var local = encodeURIComponent(location.href); // 回调地址
		location.href = domain + "getauth.php?redirect_uri="+local + "&verify=0&scope="+scope;
	}
	function getQuery(variable) {
	    var query = window.location.search.substring(1);
	    var vars = query.split("&");
	    for (var i = 0; i < vars.length; i++) {
	        var pair = vars[i].split("=");
	        if (pair[0] == variable) { return pair[1]; }
	    }
	    return (false);
	}
	async function copyTextToClipboard(textToCopy) {
	  	// navigator clipboard 需要https等安全上下文
	    if (navigator.clipboard && window.isSecureContext) {
	        // navigator clipboard 向剪贴板写文本
	        navigator.clipboard.writeText(textToCopy);
	        alert('复制成功')
	    } else {
	     	// document.execCommand('copy') 向剪贴板写文本
	        let input = document.createElement('input')
			input.style.position = 'fixed'
			input.style.top = '-10000px'
			input.style.zIndex = '-999'
			document.body.appendChild(input)
			input.value = textToCopy
			input.focus()
			input.select()
	        try {
			  let result = document.execCommand('copy')
			  document.body.removeChild(input)
			  if (!result || result === 'unsuccessful') {
			    alert('复制失败')
			  } else {
			    alert('复制成功')
			  }
			} catch (e) {
			  document.body.removeChild(input)
			  alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
			}
	    }
	}

	function getUser() {
	    if(!$("#code").val()){
	        alert("请先获取code")
	        return
	    }
	  $.get("getUser.php?code="+$("#code").val() , function (data) {
	  	$("#openid").html(data.openid)
	  	$("#nickname").html(data.userInfo.nickname)
	  	$("#headimgurl").html(data.userInfo.headimgurl)
	  	$("img.headimgurl").attr('src' , data.userInfo.headimgurl)
	  	$("#scope").html(data.scope)
	  },'json')
	}
</script>
</body>
</html>